<template>
    <div class="surprise">
        <!-- 添加彩带容器 -->
        <div class="confetti-container">
            <div v-for="n in 150" :key="n" 
                 class="confetti"
                 :style="getConfettiStyle()">
            </div>
        </div>
        
        <!-- 导航栏 开始 -->
        <div class="navbar" @click="go_back()">
            <img src="../assets/img/daohang.png" alt="导航" class="navbar_img">
        </div>
        <!-- 导航栏 结束 -->
         <div class="dialog">
            <p>🎉不是老铁，你真的找到了呀!!!</p>
            <p style="margin: 5px 0;">非常好，作为奖励，我也是给你准备了一个大礼包。</p>
            你就等着看吧，哈哈哈哈哈。
         </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

function go_back(){
    // 返回上一页
    router.back();
}

// 生成彩带样式
function getConfettiStyle() {
    const colors = [
        '#ff718d', '#fdff6a', '#7afcff', 
        '#ff8e7f', '#d5b3ff', '#ffd700',
        '#ff69b4', '#00ff00', '#87ceeb'
    ];
    
    return {
        '--x': `${Math.random() * 100}%`,
        '--initial-y': `${-20 - Math.random() * 100}px`,
        '--size': `${8 + Math.random() * 12}px`,
        '--duration': `${3 + Math.random() * 2}s`,
        '--delay': `${Math.random() * 5}s`,
        '--opacity': Math.random(),
        '--color': colors[Math.floor(Math.random() * colors.length)]
    };
}
</script>

<style lang="scss" scoped>
.surprise {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  position: relative;

  // 添加装饰元素
  &::before {
    content: '🎉';
    position: absolute;
    font-size: 120px;
    top: 10%;
    left: -20px;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
  }

  &::after {
    content: '🎁';
    position: absolute;
    font-size: 100px;
    bottom: 10%;
    right: -10px;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite 1s;
  }

  .navbar {
    z-index: 99;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    animation: slideIn 0.5s ease-out;

    &:hover {
      transform: rotate(90deg);
      background: rgba(255, 255, 255, 0.3);
    }

    .navbar_img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 320px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    p {
      margin: 0;
      font-size: 16px;
      line-height: 1.6;
      color: #1e293b;
      
      &:first-child {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 2s infinite;
      }

      &:nth-child(2) {
        margin: 12px 0;
        font-weight: 500;
      }
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      padding: 2px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }
  }
}

// 动画关键帧
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}

// 彩带容器
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

// 彩带样式
.confetti {
  position: absolute;
  top: var(--initial-y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  opacity: var(--opacity);
  transform-origin: center;
  animation: confetti-animation var(--duration) var(--delay) ease-in infinite;
}

@keyframes confetti-animation {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) scale(0.7);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 150px)) rotate(720deg) scale(1);
  }
}
</style>